<template>
  <div class="row msg" style="margin:0 auto 10px;">
    <div class="col-sm-4.5">
      <el-button-group>
        <addUser v-bind="{options, usertypes}"></addUser>
        <addusercourseall v-bind="{ multipleSelection, getCourse}"></addusercourseall>
        <router-link :to="{'name': '添加学生'}">
          <el-button type="primary" icon="el-icon-edit">添加学生</el-button>
        </router-link>
        <a
          href="https://hte-public.oss-cn-qingdao.aliyuncs.com/hterobot_student_list.xlsx"
          target="view_window"
        >
          <el-button type="primary" icon="el-icon-edit">下载学生模板</el-button>
        </a>
      </el-button-group>
    </div>
    <div calss="col-sm-8 obstruct">
      <span>选择日期&nbsp;&nbsp;</span>
      <el-date-picker
        v-model="datetime"
        type="daterange"
        format="yyyy 年 MM 月 dd 日"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
    </div>
    <div calss="row obstruct">
      <div class="col-sm-12" v-show="!showCtl">
        <el-input-number
          v-if="getUser.length"
          v-model="idnum[0]"
          :min="getUser[0].userid"
          :max="getUser[getUser.length-1].userid"
          style="margin-left:30px;"
        ></el-input-number>
        <el-input-number
          v-if="getUser.length"
          v-model="idnum[1]"
          :min="getUser[0].userid"
          :max="getUser[getUser.length-1].userid"
        ></el-input-number>
        <el-button @click="getidtouser(idnum)" class="queryuser">查询用户的id</el-button>
      </div>
      <div class="col-sm-12 phonequery" v-show="showCtl">
        <el-input class="col-sm-12 phoneinput" placeholder="请输入要查询的手机号" v-model="value"></el-input>
      </div>
      <div class="col-sm-12 phonequery" v-show="showCtl">
        <el-input class="col-sm-12 phoneinput" placeholder="请输入要查询的标签" v-model="value1"></el-input>
      </div>
    </div>
    <el-button @click="handclick()">点击切换查询</el-button>
    <!-- <div id="main" style="width: 600px;height:400px;"></div> -->
  </div>
</template>

<script>
import echarts from "echarts";
import addUser from "./addUser.vue";
import addusercourseall from "./addusercourseall.vue";
export default {
  data() {
    return {
      idnum: [],
      dialogUser: false,
      dialogFormVisible: false,
      value: "",
      value1: "",
      datetime: [],
      showCtl: true
    };
  },
  async mounted() {
    // this.start();
  },
  watch: {
    datetime(v) {
      this.datetimeChange(v);
    },
    value(v) {
      this.phoneQuery(v);
    },
    value1(v) {
      this.classQuery(v);
    }
  },
  methods: {
    start() {
      const date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      const dateyear = year + "/" + month + "/" + strDate;
      const dateyears = year + "-" + month + "-" + strDate;
      const dateyear1 = dateyear + " " + "0:00";
      const dateyear2 = dateyear + " " + "2:00";
      const dateyear3 = dateyear + " " + "4:00";
      const dateyear4 = dateyear + " " + "6:00";
      const dateyear5 = dateyear + " " + "8:00";
      const dateyear6 = dateyear + " " + "10:00";
      const dateyear7 = dateyear + " " + "12:00";
      const dateyear8 = dateyear + " " + "14:00";
      const dateyear9 = dateyear + " " + "16:00";
      const dateyear10 = dateyear + " " + "18:00";
      const dateyear11 = dateyear + " " + "20:00";
      const dateyear12 = dateyear + " " + "22:00";

      const arr = [];
      const arrer = [];
      const arrerd = [];
      const list = 0;
      const list1 = [];
      const list2 = [];
      const list3 = [];
      const list4 = [];
      const list5 = [];
      const list6 = [];
      const list7 = [];
      const list8 = [];
      const list9 = [];
      const list10 = [];
      const list11 = [];
      const list12 = [];
      for (let i of this.getUser) {
        if (
          new Date(i.lastlogintime).getFullYear() +
            "-" +
            (new Date(i.lastlogintime).getMonth() + 1) +
            "-" +
            new Date(i.lastlogintime).getDate() ===
          dateyears
        ) {
          if (
            0 <
              new Date(i.lastlogintime).getHours() +
                "" +
                (new Date(i.lastlogintime).getMinutes() > 9
                  ? new Date(i.lastlogintime).getMinutes()
                  : "0" + new Date(i.lastlogintime).getMinutes()) &&
            new Date(i.lastlogintime).getHours() +
              "" +
              (new Date(i.lastlogintime).getMinutes() > 9
                ? new Date(i.lastlogintime).getMinutes()
                : "0" + new Date(i.lastlogintime).getMinutes()) <
              159
          ) {
            list1.push(i);
            console.log(new Date(i.lastlogintime).getHours()) +
              "" +
              new Date(i.lastlogintime).getMinutes();
          }
          if (
            200 <
              new Date(i.lastlogintime).getHours() +
                "" +
                (new Date(i.lastlogintime).getMinutes() > 9
                  ? new Date(i.lastlogintime).getMinutes()
                  : "0" + new Date(i.lastlogintime).getMinutes()) &&
            new Date(i.lastlogintime).getHours() +
              "" +
              (new Date(i.lastlogintime).getMinutes() > 9
                ? new Date(i.lastlogintime).getMinutes()
                : "0" + new Date(i.lastlogintime).getMinutes()) <
              359
          ) {
            list2.push(i);
            console.log(1);
          }
          if (
            400 <
              new Date(i.lastlogintime).getHours() +
                "" +
                (new Date(i.lastlogintime).getMinutes() > 9
                  ? new Date(i.lastlogintime).getMinutes()
                  : "0" + new Date(i.lastlogintime).getMinutes()) &&
            new Date(i.lastlogintime).getHours() +
              "" +
              (new Date(i.lastlogintime).getMinutes() > 9
                ? new Date(i.lastlogintime).getMinutes()
                : "0" + new Date(i.lastlogintime).getMinutes()) <
              559
          ) {
            list3.push(i);
            console.log(2);
          }
          if (
            600 <
              new Date(i.lastlogintime).getHours() +
                "" +
                (new Date(i.lastlogintime).getMinutes() > 9
                  ? new Date(i.lastlogintime).getMinutes()
                  : "0" + new Date(i.lastlogintime).getMinutes()) &&
            new Date(i.lastlogintime).getHours() +
              "" +
              (new Date(i.lastlogintime).getMinutes() > 9
                ? new Date(i.lastlogintime).getMinutes()
                : "0" + new Date(i.lastlogintime).getMinutes()) <
              759
          ) {
            list4.push(i);
            console.log(4);
          }
          if (
            800 <
              new Date(i.lastlogintime).getHours() +
                "" +
                (new Date(i.lastlogintime).getMinutes() > 9
                  ? new Date(i.lastlogintime).getMinutes()
                  : "0" + new Date(i.lastlogintime).getMinutes()) &&
            new Date(i.lastlogintime).getHours() +
              "" +
              (new Date(i.lastlogintime).getMinutes() > 9
                ? new Date(i.lastlogintime).getMinutes()
                : "0" + new Date(i.lastlogintime).getMinutes()) <
              959
          ) {
            list5.push(i);
            console.log(5);
          }
          if (
            1000 <
              new Date(i.lastlogintime).getHours() +
                "" +
                (new Date(i.lastlogintime).getMinutes() > 9
                  ? new Date(i.lastlogintime).getMinutes()
                  : "0" + new Date(i.lastlogintime).getMinutes()) &&
            new Date(i.lastlogintime).getHours() +
              "" +
              (new Date(i.lastlogintime).getMinutes() > 9
                ? new Date(i.lastlogintime).getMinutes()
                : "0" + new Date(i.lastlogintime).getMinutes()) <
              1159
          ) {
            list6.push(i);
            console.log(6);
          }
          if (
            1200 <
              new Date(i.lastlogintime).getHours() +
                "" +
                (new Date(i.lastlogintime).getMinutes() > 9
                  ? new Date(i.lastlogintime).getMinutes()
                  : "0" + new Date(i.lastlogintime).getMinutes()) &&
            new Date(i.lastlogintime).getHours() +
              "" +
              (new Date(i.lastlogintime).getMinutes() > 9
                ? new Date(i.lastlogintime).getMinutes()
                : "0" + new Date(i.lastlogintime).getMinutes()) <
              1359
          ) {
            list7.push(i);
            console.log(7);
          }
          if (
            1400 <
              new Date(i.lastlogintime).getHours() +
                "" +
                (new Date(i.lastlogintime).getMinutes() > 9
                  ? new Date(i.lastlogintime).getMinutes()
                  : "0" + new Date(i.lastlogintime).getMinutes()) &&
            new Date(i.lastlogintime).getHours() +
              "" +
              (new Date(i.lastlogintime).getMinutes() > 9
                ? new Date(i.lastlogintime).getMinutes()
                : "0" + new Date(i.lastlogintime).getMinutes()) <
              1559
          ) {
            list8.push(i);
            console.log(8);
          }
          if (
            1600 <
              new Date(i.lastlogintime).getHours() +
                "" +
                (new Date(i.lastlogintime).getMinutes() > 9
                  ? new Date(i.lastlogintime).getMinutes()
                  : "0" + new Date(i.lastlogintime).getMinutes()) &&
            new Date(i.lastlogintime).getHours() +
              "" +
              (new Date(i.lastlogintime).getMinutes() > 9
                ? new Date(i.lastlogintime).getMinutes()
                : "0" + new Date(i.lastlogintime).getMinutes()) <
              1759
          ) {
            list9.push(i);
            console.log(9);
          }
          if (
            1800 <
              new Date(i.lastlogintime).getHours() +
                "" +
                (new Date(i.lastlogintime).getMinutes() > 9
                  ? new Date(i.lastlogintime).getMinutes()
                  : "0" + new Date(i.lastlogintime).getMinutes()) &&
            new Date(i.lastlogintime).getHours() +
              "" +
              (new Date(i.lastlogintime).getMinutes() > 9
                ? new Date(i.lastlogintime).getMinutes()
                : "0" + new Date(i.lastlogintime).getMinutes()) <
              1959
          ) {
            list10.push(i);
            console.log(10);
          }
          if (
            2000 <
              new Date(i.lastlogintime).getHours() +
                "" +
                (new Date(i.lastlogintime).getMinutes() > 9
                  ? new Date(i.lastlogintime).getMinutes()
                  : "0" + new Date(i.lastlogintime).getMinutes()) &&
            new Date(i.lastlogintime).getHours() +
              "" +
              (new Date(i.lastlogintime).getMinutes() > 9
                ? new Date(i.lastlogintime).getMinutes()
                : "0" + new Date(i.lastlogintime).getMinutes()) <
              2159
          ) {
            list11.push(i);
            console.log(11);
          }
          if (
            2200 <
              new Date(i.lastlogintime).getHours() +
                "" +
                (new Date(i.lastlogintime).getMinutes() > 9
                  ? new Date(i.lastlogintime).getMinutes()
                  : "0" + new Date(i.lastlogintime).getMinutes()) &&
            new Date(i.lastlogintime).getHours() +
              "" +
              (new Date(i.lastlogintime).getMinutes() > 9
                ? new Date(i.lastlogintime).getMinutes()
                : "0" + new Date(i.lastlogintime).getMinutes()) <
              2359
          ) {
            list12.push(i);
            console.log(12);
          }
          this.list = list + 1;
          arr.push(this.list);
          arrer.push({
            name: new Date(i.lastlogintime).getHours() + ":" + "00",
            value: [new Date(i.lastlogintime).getHours() + 1 + ":" + "00"]
          });
          arrerd.push(i.username);
        }
      }

      var data = [
        { name: dateyear, value: [dateyear1, list1.length] },
        { name: dateyear, value: [dateyear2, list2.length] },
        { name: dateyear, value: [dateyear3, list3.length] },
        { name: dateyear, value: [dateyear4, list4.length] },
        { name: dateyear, value: [dateyear5, list5.length] },
        { name: dateyear, value: [dateyear6, list6.length] },
        { name: dateyear, value: [dateyear7, list7.length] },
        { name: dateyear, value: [dateyear8, list8.length] },
        { name: dateyear, value: [dateyear9, list9.length] },
        { name: dateyear, value: [dateyear10, list10.length] },
        { name: dateyear, value: [dateyear11, list11.length] },
        { name: dateyear, value: [dateyear12, list12.length] }
      ];

      var myChart = echarts.init(document.getElementById("main"));
      var option = {
        title: {
          text: "今日登陆"
        },

        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            params = params[0];
            var date = new Date(params.name);
            return (
              date.getDate() +
              "/" +
              (date.getMonth() + 1) +
              "/" +
              date.getFullYear() +
              " : " +
              params.value[1]
            );
          },
          axisPointer: {
            animation: false
          }
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        dataZoom: [
          {
            startValue:
              new Date().getFullYear() +
              "-" +
              (new Date().getMonth() + 1) +
              "-" +
              new Date().getDate()
          },
          {
            type: "inside"
          }
        ],
        xAxis: {
          type: "time",
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: "数据",
            type: "line",
            showSymbol: false,
            hoverAnimation: false,
            data: data
          }
        ]
      };
      myChart.setOption(option);
    },
    handclick() {
      this.showCtl = !this.showCtl;
    }
  },
  props: [
    "phoneQuery",
    "classQuery",
    "getidtouser",
    "datetimeChange",
    "showdialo",
    "getUser",
    "options",
    "getCourse",
    "multipleSelection",
    "usertypes"
  ],
  components: {
    addUser,
    addusercourseall
  }
};
</script>
<style scoped>
.obstruct {
  /* margin-left:10px; */
  display: inline-block;
}

.block {
  float: right;
}

.queryuser {
  background-color: #409eff;
  color: white;
}

.phonequery::after {
  content: "";
  clear: both;
  display: inline-block;
}

.phonequery {
  display: flex;
}

.phoneinput {
  flex: 1;
  padding-right: 0px;
}
</style>